<h3>描述</h3>
<p>Select选择下拉组件, 下拉数据量大的时候可以将 virtual 接口设置为 true 来开启虚拟滚动功能。分组下拉不支持虚拟滚动。</p>
<p>virtual 接口：默认值为 false。</p>
<h3>导入</h3>
<span>import {{ '{' }} TiSelectModule {{ '}' }} from '@opentiny/ng';</span>
<h3>示例</h3>

<h4>1.基础多选:</h4>
<br />
<span>国家: </span>
<ti-select
  style="width: 120px"
  [multiple]="true"
  [virtual]="true"
  [options]="myOptions1"
  [(ngModel)]="mySelected1"
  placeholder="请选择"
  id="myselect1"
>
</ti-select>
<br />
<p>选中项：{{mySelected1 | json}}</p>
<p>总条数：{{myOptions1&&myOptions1.length}}</p>
<button type="button" (click)="changeEmpty1()">改变数据：空</button>
<button type="button" (click)="changeMany1()">改变数据：大量(有滚动条)</button>
<button type="button" (click)="changeFew1()">改变数据：少量(没有滚动条)</button><br />

<h4>2.多选 + 搜索:</h4>
<br />
<span>国家: </span>
<ti-select
  style="width: 120px"
  [multiple]="true"
  [virtual]="true"
  [searchable]="true"
  [options]="myOptions2"
  [(ngModel)]="mySelected2"
  placeholder="请选择"
  id="myselect2"
>
</ti-select>
<br />
<p>选中项：{{mySelected2 | json}}</p>
<p>总条数：{{myOptions2&&myOptions2.length}}</p>
<button type="button" (click)="changeEmpty2()">改变数据：空</button>
<button type="button" (click)="changeMany2()">改变数据：大量(有滚动条)</button>
<button type="button" (click)="changeFew2()">改变数据：少量(没有滚动条)</button><br />

<h4>3.多选 + 全选:</h4>
<br />
<span>国家: </span>
<ti-select
  style="width: 120px"
  [multiple]="true"
  [selectAll]="true"
  [virtual]="true"
  [options]="myOptions3"
  [(ngModel)]="mySelected3"
  placeholder="请选择"
  id="myselect3"
>
</ti-select>
<br />
<p>选中项：{{mySelected3 | json}}</p>
<p>总条数：{{myOptions3&&myOptions3.length}}</p>
<button type="button" (click)="changeEmpty3()">改变数据：空</button>
<button type="button" (click)="changeMany3()">改变数据：大量(有滚动条)</button>
<button type="button" (click)="changeFew3()">改变数据：少量(没有滚动条)</button><br />

<h4>4.多选 + 全选 + 搜索:</h4>
<br />
<span>国家: </span>
<ti-select
  style="width: 120px"
  [virtual]="true"
  [multiple]="true"
  [selectAll]="true"
  [searchable]="true"
  [options]="myOptions4"
  [(ngModel)]="mySelected4"
  placeholder="请选择"
  id="myselect4"
>
</ti-select>
<br />
<p>选中项：{{mySelected4 | json}}</p>
<p>总条数：{{myOptions4&&myOptions4.length}}</p>
<button type="button" (click)="changeEmpty4()">改变数据：空</button>
<button type="button" (click)="changeMany4()">改变数据：大量(有滚动条)</button>
<button type="button" (click)="changeFew4()">改变数据：少量(没有滚动条)</button><br />

<h4>5.多选 + 搜索 + 自定义底部:</h4>
<br />
<span>国家: </span>
<ti-select
  style="width: 120px"
  [virtual]="true"
  [multiple]="true"
  [searchable]="true"
  [options]="myOptions5"
  [(ngModel)]="mySelected5"
  placeholder="请选择"
  id="myselect5"
>
  <ng-template #footer let-item>
    <div class="footer">
      <span (mousedown)="mousedown()">可以填充</span>
    </div>
  </ng-template>
</ti-select>
<br />
<p>选中项：{{mySelected5 | json}}</p>
<p>总条数：{{myOptions5&&myOptions5.length}}</p>
<button type="button" (click)="changeEmpty5()">改变数据：空</button>
<button type="button" (click)="changeMany5()">改变数据：大量(有滚动条)</button>
<button type="button" (click)="changeFew5()">改变数据：少量(没有滚动条)</button><br />

<style>
  .footer {
    padding: 10px;
    position: relative;
    font-size: 12px;
  }

  .footer ti-icon[local] {
    margin-right: 4px;
    font-size: 16px;
    vertical-align: bottom;
  }

  .footer:after {
    position: absolute;
    display: inline-block;
    top: 0;
    left: 10px;
    content: '';
    width: calc(100% - 20px);
    height: 1px;
    background-color: var(--ti-common-color-line-dividing);
  }
</style>
